<template>
	<div class="main">
		<div class="title">重点学科
			<div class="line"></div>
		</div>
		<div class="activename">
			<el-tabs v-model="activeName" class="homeMain" @tab-click="handleclick()">
				<el-tab-pane :label="Subjectcategories[0]" class="tabpane" name="0">
					
					<!-- <el-card> -->
						<el-row :class="['bdbottom',i1===0?'bdtop':'','vcenter']" v-for='(item1,i1) in content'
							:key='i1'>
							<!-- 一级标签 -->
							<el-col :span="4">
								<el-tag class="tag" >{{item1.category}}
								</el-tag>
								<i class="el-icon-caret-right"></i>
							</el-col>
							<el-col :span="20">
					 		<!-- 二级标签 -->
								<el-row :class="[i2===0?'':'bdtop','vcenter']" v-for='(item2,i2) in item1.categories'
									:key='i2'>
									<el-col :span="9">
										<el-tag class="tag" type="success" >
											{{item2.codeAndName}}
										</el-tag>
										<i class="el-icon-caret-right"></i>
									</el-col>
									<el-col :span="15">
										<el-tag  class="tag" type="warning" 
											v-for='(item3,i3) in item2.codeAndNames' :key="i3">
											{{item3}}
										</el-tag>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					<!-- </el-card> -->
				</el-tab-pane>
				<el-tab-pane :label="Subjectcategories[1]" class="tabpane" name="1">
					<el-row :class="['bdbottom',i1===0?'bdtop':'','vcenter']" v-for='(item1,i1) in content'
						:key='i1'>
						<!-- 一级标签 -->
						<el-col :span="4">
							<el-tag class="tag" >{{item1.category}}
							</el-tag>
							<i class="el-icon-caret-right"></i>
						</el-col>
						<el-col :span="20">
						<!-- 二级标签 -->
							<el-row :class="[i2===0?'':'bdtop','vcenter']" v-for='(item2,i2) in item1.categories'
								:key='i2'>
								<el-col :span="14">
									<el-tag class="tag" type="success" >
										{{item2.codeAndName}}
									</el-tag>
									<i class="el-icon-caret-right"></i>
								</el-col>
								<el-col :span="10">
									<el-tag class="tag" type="warning" 
										v-for='(item3,i3) in item2.codeAndNames' :key="i3">
										{{item3}}
									</el-tag>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane :label="Subjectcategories[2]" name="2">
					<el-row :class="['bdbottom',i1===0?'bdtop':'','vcenter']" v-for='(item1,i1) in content'
						:key='i1'>
						<!-- 一级标签 -->
						<el-col :span="5">
							<el-tag class="tag" >{{item1.category}}
							</el-tag>
							<i class="el-icon-caret-right"></i>
						</el-col>
						<el-col :span="19">
						<!-- 二级标签 -->
							<el-row :class="[i2===0?'':'bdtop','vcenter']" v-for='(item2,i2) in item1.categories'
								:key='i2'>
								<el-col :span="8">
									<el-tag class="tag" type="success" >
										{{item2.codeAndName}}
									</el-tag>
									<i class="el-icon-caret-right"></i>
								</el-col>
								<el-col :span="16">
									<el-tag  class="tag" type="warning" 
										v-for='(item3,i3) in item2.codeAndNames' :key="i3">
										{{item3}}
									</el-tag>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane :label="Subjectcategories[3]" name="3">
					<el-row :class="['bdbottom',i1===0?'bdtop':'','vcenter']" v-for='(item1,i1) in content'
						:key='i1'>
						<!-- 一级标签 -->
						<el-col :span="3">
							<el-tag class="tag" >{{item1.category}}
							</el-tag>
							<i class="el-icon-caret-right"></i>
						</el-col>
						<el-col :span="21">
						<!-- 二级标签 -->
							<el-row :class="[i2===0?'':'bdtop','vcenter']" v-for='(item2,i2) in item1.categories'
								:key='i2'>
								<el-col :span="10">
									<el-tag class="tag" type="success" >
										{{item2.codeAndName}}
									</el-tag>
									<i class="el-icon-caret-right"></i>
								</el-col>
								<el-col :span="14">
									<el-tag  class="tag" type="warning" 
										v-for='(item3,i3) in item2.codeAndNames' :key="i3">
										{{item3}}
									</el-tag>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane :label="Subjectcategories[4]" name="4">
					<el-row :class="['bdbottom',i1===0?'bdtop':'','vcenter']" v-for='(item1,i1) in content'
						:key='i1'>
						<!-- 一级标签 -->
						<el-col :span="5">
							<el-tag class="tag" >{{item1.category}}
							</el-tag>
							<i class="el-icon-caret-right"></i>
						</el-col>
						<el-col :span="19">
						<!-- 二级标签 -->
							<el-row :class="[i2===0?'':'bdtop','vcenter']" v-for='(item2,i2) in item1.categories'
								:key='i2'>
								<el-col :span="8">
									<el-tag class="tag" type="success" >
										{{item2.codeAndName}}
									</el-tag>
									<i class="el-icon-caret-right"></i>
								</el-col>
								<el-col :span="16">
									<el-tag  class="tag" type="warning" 
										v-for='(item3,i3) in item2.codeAndNames' :key="i3">
										{{item3}}
									</el-tag>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
					
				</el-tab-pane>
				<el-pagination
				      @current-change="handleCurrentChange"
				      :current-page.sync="qurey.startPage"
				      :page-size="5"
				      layout="total, prev, pager, next"
				      :total="total">
				    </el-pagination>
			</el-tabs>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				Subjectcategories: [],
				qurey: {
					"pageSize": 5,
					"startPage": 1
				},
				activeName: '0',
				content: [],
				total:20
			}
		},
		methods: {
			async getSubjectcategorieslist() {
				const res = await this.$axios.get(
					`${this.baseURL}/CoreSubject/selectAllCodeSchool?pageSize=${this.qurey.pageSize}&&startPage=${this.qurey.startPage}`
					)
				// console.log(res.data.data.data)
				this.Subjectcategories = res.data.data.data
				this.total = res.data.data.total
				this.handleclick()
			},
			async handleclick() {
				const res = await this.$axios.post(
					`${this.baseURL}/CoreSubject/selectDetailedSchool?subjectCodeAndName=${this.Subjectcategories[this.activeName]}`
					)
				this.content = res.data.data
			},
			handleCurrentChange(newpage){
				this.qurey.startPage=newpage
				this.getSubjectcategorieslist()
			}
		},
		created() {
			this.getSubjectcategorieslist()
		}
	}
</script>

<style scoped>
	.main {
		width: 100%;

	}

	.title {
		text-align: left;
		width: 100%;
		height: 62px;
		font-size: 24px;
		font-family: Noto Sans SC;
		font-weight: 700;
		text-align: left;
		color: #333333;
		margin-top: 15px;
		margin-left: 20px;
		position: relative;
	}

	.line {
		position: absolute;
		bottom: 0px;
		width: 1025px;
		height: 2px;
		background-color: rgba(51, 170, 255, .4);
	}

	#tab-first {
		margin-left: 20px;
	}

	.el-tabs--top {
		padding: 0 20px;
	}

	.activename>>>.el-tabs__nav-wrap::after {
		position: static !important;
	}

	.vcenter {
		display: flex;
		align-items: center;
	}
	.bdtop{
		border-top:1px solid #cecece;
		
	}
	.bdbottom{
		border-bottom:1px solid #cecece;
		
	}
	.tag{
		margin: 10px 5px 10px 5px;
		font-size: 18px;
	}
	.tabpane{
		width:100%
	}
	.el-pagination .btn-next {
		background-size: 16px;
	}
	.activename>>>.el-pagination__total {
		font-size: 20px;
	}
	.activename>>>.el-pager li.active{
		font-size: 20px;
	}
	.activename>>>.number{
		font-size: 20px;
	}
	.activename>>>.el-tabs__item{
		font-size: 20px!important;
	}
</style>
